<template>
<view>
<check-form-detail-component ref="checkFormDetail" id="checkFormDetail" showBtn="true" :formCommitId="formCommitId" v-if="formCommitId" @selectPsotion="selectPsotion"></check-form-detail-component>
<!-- 分享 -->
<view class="zhezhao" v-if="showTypeTwo" @tap="closeZhezhao"></view>
<view class="shareFormPoster" :style="'background:' + setting.platformSetting.defaultColor" @tap="showShare">
  <image class="shareFormPosterImg" src="https://image1.sansancloud.com/xianhua/2019_7/9/17/4/27_602.jpg?x-oss-process=style/preview_120"></image>
</view>
<view class="select_share_list" :animation="animationDataTwo">
  <view class="select_share_item" v-for="(item, index) in shareTypeData" :key="index">
    <text class="select_share_name" @click.stop="showPoster" v-if="item.type=='text'">{{item.name}}</text>
    <button open-type="share" class="select_share_name" v-else>{{item.name}}</button>
  </view>
  <view class="select_share_item cancel_select_share" @tap="closeZhezhao">
    <text class="select_share_name">取消</text>
  </view>
</view>
<form-posters-component :formCommitId="formCommitId" :posterTitle="posterTitle" :bannerImgUrl="allFormData.banner" :ewmImgUrl="ewmImgUrl" v-if="posterState" @closePoaster="getChilrenPoster"></form-posters-component>
 <!-- 首页组件-详情装饰-->
 <!-- <custom-page-index-component :receiveData="sendFormData" v-if="sendFormData"></custom-page-index-component> -->
</view>
</template>

<script>

export default {
  data() {
    return {
      formCommitId: 0,
      showTypeTwo: false,
      animationDataTwo: null,
      shareTypeData: [{
        name: '发送给朋友',
        type: 'botton'
      }, {
        name: '生成海报',
        type: 'text'
      }],
      haveValueList: [],
      allFormData: null,
      posterState: false,
      posterTitle: '',
      sendFormData: null,
      loading: false,
      ewmImgUrl: "",
      setting: ""
    };
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    console.log(options);
    that.getDetail(options.custom_form_commit_id);
    that.setData({
      formCommitId: options.custom_form_commit_id,
      setting: getApp().globalData.setting
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
        let that = this;
        console.log(that.$refs.checkFormDetail)
        that.$refs.checkFormDetail.componentShow();
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let that = this;
    // console.log(that.$refs.checkFormDetail)
    // that.$refs.checkFormDetail.onShow();
    // console.log(that.selectComponent("#checkFormDetail"))
    // that.selectComponent("#checkFormDetail").onShow();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    let that = this;
    that.selectComponent("#checkFormDetail").componentPullDownRefresh();
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    let that = this;
    console.log('onReachBottom');
    that.selectComponent("#checkFormDetail").componentReachBottom(); // if (that.totalSize) {
    //   if (that.totalSize > that.curPage * that.pageSize) {
    //     that.getCommentData(that.data.allFormData.id, ++that.curPage);
    //   } else {
    //     console.log("没有更多数据了");
    //   }
    // }else{
    // }
  },

  /**
   * 用户点击右上角分享
   */
  onShareTimeline:function(){
    return this.shareFun();
  },
  onShareAppMessage: function (res) {
    console.log(res);
    return this.shareFun();
  },
  methods: {
    shareFun:function(){
        let that = this;
        that.closeZhezhao();
        console.log('that.data.haveValueList:', that.haveValueList);
        let params = {
          custom_form_commit_id: that.formCommitId
        };
        let shareName = that.allFormData.belongFormName + "(" + that.haveValueList.join("/") + ")";
        let shareAppMessageData = getApp().globalData.shareForFx2('check_form_detail', shareName, params, '', 'custom_form_commit_id');
        console.log('params:', params);
        return shareAppMessageData;
    },
    closeZhezhao: function () {
      this.setData({
        showTypeTwo: false
      });
      let animation = wx.createAnimation({
        duration: 400,
        timingFunction: 'ease-out'
      });
      animation.height(0).step();
      let setData = animation.export();
      this.setData({
        animationDataTwo: setData
      });
    },
    showShare: function () {
      this.setData({
        showTypeTwo: !this.showTypeTwo
      });
      let showTypeTwo = this.showTypeTwo;
      let animation = wx.createAnimation({
        duration: 400,
        timingFunction: 'ease-in-out'
      });
      console.log("=======popupFormPage==========", animation, this.showType);

      if (showTypeTwo) {
        animation.height(150).step();
      } else {
        animation.height(0).step();
      }

      this.setData({
        animationDataTwo: animation.export()
      });
    },
    getDetail: function (formCommitId) {
      let that = this;
      wx.showToast({
        title: '加载中...',
        icon: 'loading'
      });
      let formDetailData = getApp().globalData.AddClientUrl("/wx_get_custom_form_commit.html", {
        formCommitId: formCommitId
      }, 'get');
      wx.request({
        url: formDetailData.url,
        data: formDetailData.params,
        header: getApp().globalData.headerPost,
        method: 'get',
        success: function (res) {
          console.log("====success====", res);

          if (res.data.errcode == 0) {
            wx.hideLoading();
            let sendFormData = JSON.stringify({
              title: 'noTitle',
              url: "form_" + res.data.relateObj.belongFormId
            });
            that.setData({
              sendFormData: sendFormData
            });
            that.setData({
              allFormData: res.data.relateObj,
              loading: false
            });
            let commitJson = JSON.parse(that.allFormData.commitJson);
            console.log("=======commitJson========", commitJson);
            let haveValueList = [];

            for (let key in commitJson) {
              if (commitJson[key].value && commitJson[key].value.length != 0 && commitJson[key].type != 7 && commitJson[key].type != 11 && commitJson[key].showInList == 1) {
                let value = commitJson[key].value.value || commitJson[key].value;
                haveValueList.push(value);
              }
            }

            console.log("=========haveValueList==========", haveValueList);
            that.setData({
              haveValueList: haveValueList
            });
          } else {
            wx.showToast({
              title: '加载失败...',
              icon: 'none',
              duration: 2000
            });
            setTimeout(function () {
              wx.navigateBack({
                delta: 1
              });
            }, 2000);
          }
        }
      });
    },
    showPoster: function () {
      let that = this;
      let ewmImgUrl = getApp().globalData.getQrCode({
        type: "check_form_detail",
        id: that.formCommitId
      });
      let posterTitle = that.allFormData.belongFormName + "(" + that.haveValueList.join("/") + ")";
      that.setData({
        posterState: true,
        ewmImgUrl: ewmImgUrl,
        posterTitle: posterTitle
      });
    },

    // 关闭海报
    getChilrenPoster(e) {
      let that = this;
      that.setData({
        posterState: false
      });
    },

    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style scoped>
@import "./index.css";
</style>